<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/shop/static/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/shop/static/css/public.css" media="all" type="text/css">
</head>
<body class="childrenBody">
<form class="layui-form" lay-filter="example">
	<blockquote class="layui-elem-quote quoteBox">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" class="layui-input searchVal" placeholder="请输入内容" />
				</div>
				<a class="layui-btn search_btn" data-type="reload">搜索</a>
			</div>
<!-- 			<div class="layui-inline">
				<a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
			    </div> -->
	</blockquote>
	<table id="userList" lay-filter="userList"></table>
</form>
	<script type="text/html" id="userStatus">
		{{#  if(d.state == 1){ }}
			正常
		{{#  } else { }}
			<span class="layui-red">被冻结</span>
		{{#  }}}
	</script>

	<!--操作-->
	<script type="text/html" id="userListBar">
		<a class="layui-btn layui-btn-xs" lay-event="configure">配置角色</a>
		{{#  if(d.state == 1){ }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="frozen">冻结</a>
		{{#  } else { }}
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="freezing">恢复</a>
		{{#  }}}
	</script>
<script src="/shop/static/layui/layui.js" charset="utf-8" type="text/javascript"></script>
<script type="text/javascript" src="/shop/static/js/common/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
layui.use(['form','layer','laydate','table','laytpl'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laydate = layui.laydate,
        laytpl = layui.laytpl,
        table = layui.table;

    //人员列表
    var tableIns = table.render({
        elem: '#userList',
        url : '/shop/power/queryUserPage',
        cellMinWidth : 95,
        page : true,
        height : "full-125",
        limit : 20,
        limits : [1,10,15,20,25],
        id : "userListTable",
        cols : [[
            {type: "checkbox", fixed:"left", width:50},
            {field: 'username', title: '登陆账号'},
            {field: 'name', title: '姓名'},
            {field: 'phone', title: '联系电话'},
            {field: 'state', title: '账号状态',templet:"#userStatus"},
            {field: 'createDate', title: '注册时间', align:'center', minWidth:110, templet:function(d){
                return d.createDate.substring(0,10);
            }},
            {title: '操作', width:170, templet:'#userListBar',fixed:"right",align:"center"}
        ]]
    ,skin: 'line'
    });

    //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
    $(".search_btn").on("click",function(){
        if($(".searchVal").val() != ''){
            table.reload("userListTable",{
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                	username: $(".searchVal").val()//搜索的关键字
                }
            })
        }else{
            layer.msg("请输入搜索的内容");
        }
    });

    //列表操作
    table.on('tool(userList)', function(obj){
        var layEvent = obj.event,
            data = obj.data;
        if(layEvent === 'configure'){ //设置角色
        	window.location.href="/shop/power/userAddRole?id="+data.id;
        } else if(layEvent === 'frozen'){ //冻结
            layer.confirm('确定冻结此账号？',{icon:3, title:'提示信息'},function(index){
                  $.get("/shop/power/changeUserState",{
                     id : data.id,state : 0  //将需要删除的productsId作为参数传入
                 },function(data){
                		 layer.msg(data.msg);
                		 tableIns.reload();
                         layer.close(index);
                 }) 
            });
        } else if(layEvent === 'freezing'){ //恢复
            layer.confirm('确定恢复此账号？',{icon:3, title:'提示信息'},function(index){
                $.get("/shop/power/changeUserState",{
                   id : data.id,state : 1  //将需要删除的productsId作为参数传入
               },function(data){
              		 layer.msg(data.msg);
              		 tableIns.reload();
                       layer.close(index);
               }) 
          });
        }
    });

})
</script>
</body>
</html>